<template>
  <div class="home">
    <div class="header">
      <div class="item" v-for="item in totalData" :key="item.id">
        {{ item.title }}
        <div class="num">{{ item.total }}</div>
        <div class="bottom">指标: {{ item.current }}</div>
      </div>
    </div>

    <!-- 访问时长 -->
    <div class="content">
      <div class="time-info">
        <div class="title">年销量</div>
        <div id="chart" style="width: 100%; height: 360px"></div>
      </div>
      <div class="area">
        <div class="title">月销售额</div>
        <div id="charts" style="width: 100%; height: 300px"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalData: []
    }
  },
  mounted() {
    this.$api.getStatistical().then((res) => {
      if (res.data.status === 200) {
        this.totalData = res.data.list
      }
    })
    this.$api.getSellTotal().then((res) => {
      let xData = res.data.info.date
      // 获取数据
      let xResult = res.data.info.xResult
      let titleArr = []
      let data = []

      xResult.forEach((ele) => {
        titleArr.push(ele.xName)
        ele.data.forEach((item) => {
          data.push(item.num)
        })
      })
      this.initCharts(
        xData,
        data.slice(0, 6),
        data.slice(6, 12),
        data.slice(12, 18),
        data.slice(18, 24)
      )
      this.mycharts(data.slice(0, 6), data.slice(6, 12), data.slice(12, 18), data.slice(18, 24))
    })
  },
  methods: {
    // 计算饼图年销量
    sum(arr) {
      let sums = arr.reduce(function (a, b) {
        return parseInt(a) + parseInt(b)
      }, 0)
      return sums
    },
    // 饼图
    mycharts(data1, data2, data3, data4) {
      let myChart = this.$echarts.init(document.getElementById('chart'))
      let option = {
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '销量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.sum(data1), name: '家具' },
              { value: this.sum(data2), name: '手机' },
              { value: this.sum(data3), name: '家电' },
              { value: this.sum(data4), name: '电脑' },
              { value: 1666, name: '其他' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
    },
    // 折线图
    initCharts(data, data1, data2, data3, data4) {
      let charts = this.$echarts.init(document.getElementById('charts'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['家具', '手机', '家电', '电脑', '其他'],
          left: 100
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '家具',
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: data1
          },
          {
            name: '手机',
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: data2
          },
          {
            name: '家电',
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: data3
          },
          {
            name: '电脑',
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: data4
          },
          {
            name: '其他',
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [300, 500, 100, 300, 100, 400]
          }
        ]
      }
      charts.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  margin: 10px;
}
.header {
  display: flex;
  padding-right: 30px;
  .item {
    flex: 1;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: #fff;
    //  text-align: center;
    position: relative;
    .num {
      font-size: 30px;
      margin: 10px 60px;
      color: #fff;
    }
    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      color: #fff;
      font-weight: normal;
    }
  }
  .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }
  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }
  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }
  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
  }
}
.content {
  margin-top: 20px;
  display: flex;
  height: 400px;
  .title {
    margin-bottom: 30px;
  }
  .time-info {
    flex: 2;
    background: #fff;
    margin-right: 10px;
  }
  .area {
    flex: 2;
    background: #fff;
  }
}
</style>
